import React, { Component } from 'react';
import { Link, browserHistory } from 'dva/router';
import autoBind from 'react-autobind';
import { NavBar, Icon, Grid } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget 
import SearchResultNav from '../SearchResultNav';

class SearchResult extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    onClickItem(goodsId) {
    	browserHistory.push(`/production/detail/${goodsId}`)
    }
	render() {	
		const { meyley, keywords } = this.props

	 	return (
	 		<div className="search-result">
			{
				meyley.searchProductionInfo ? (
					<div>
						<SearchResultNav {...this.props} />
						{
							meyley.searchProductionInfo.totalData ? (
								<div className={`${styles["search-result-grid"]} search-result-grid`}>
						 			<Grid data={meyley.searchProductionInfo.goodsList} columnNum={2} hasLine={false}
								        renderItem={(dataItem, index) => (
								          <div className={styles['search-result-item']} key={index} onClick={this.onClickItem.bind(this, dataItem.goodsId)}>
								          	<div className={styles["search-result-item-img"]}>
								            	<img src={dataItem.goodsThumb} style={{ width: '80%', minHeight: '2.90rem', margin: '0.12rem', maxHeight: '3.00rem' }} />
								            </div>
								            <div className={styles['search-result-item-title']}>
								            {dataItem.goodsName}
								            </div>
								            <div className={styles["search-result-item-price"]}>
								            ￥{dataItem.shopPrice}
								            </div>
								          </div>
								    )}
								    />
						    	</div>) : (
								<div className={styles['search-result-empty']}>
									暂无商品
								</div>)
						}
			    	</div>
			    ) : null
			}
			</div>
	  	);
	}
};

SearchResult.propTypes = {
};

export default SearchResult
